<!-- banner start -->
<div class="banner">
            <div class="banner-title">
                <h2>表单验证</h2>
                <p><a href="https://jqueryvalidation.org/" target="_blank">jQueryValidatio.js官方网站</a>, <a href="http://www.runoob.com/jquery/jquery-plugin-validate.html" target="_blank">中文文档</a></p>
            </div>
        </div>
        <!-- banner over -->
        <!-- container start -->
        <div class="container-fluid">
            <!-- row start -->
            <div class="row">
                <!-- column start -->
                <div class="col-lg-12">
                    <section class="card">
                        <div class="card-header">
                            <h3 class="title">HTML验证方式<small>也可使用js的验证方式, 方法查看文档</small></h3>
                        </div>
                        <div class="card-body">
                            <!-- form start -->
                            <form class="form" id="demo">
                                <fieldset class="form-group">
                                    <legend class="label">用户名<span class="red">*</span></legend>
                                    <input class="input validate-feedback" type="text" name="username" placeholder="请输入2-16个字符" rangelength="2,16" required>
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">密码<span class="red">*</span></legend>
                                    <input class="input" type="password" name="password" id="password" placeholder="请输入最少6个字符" minlength="6" required>
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">重复密码<span class="red">*</span></legend>
                                    <input class="input" type="password" name="repeat-password" placeholder="请再次输入密码" minlength="6" equalTo="#password" required>
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">电子邮箱</legend>
                                    <input class="input" type="email" name="email" placeholder="请输入电子邮箱地址">
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">下拉列表<span class="red">*</span></legend>
                                    <select class="select" required>
                                        <option value="">请选择</option>
                                        <option value="1">选项一</option>
                                        <option value="2">选项二</option>
                                    </select>
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">单选框<span class="red">*</span></legend>
                                    <div class="radiocheckbox-group-horizontal">
                                        <label class="radiocheckbox-item">
                                            <input class="radiocheckbox" type="radio" name="radio" required>
                                            <span class="radiocheckbox-replace"></span>
                                            <p>选项一</p>
                                        </label>
                                        <label class="radiocheckbox-item">
                                            <input class="radiocheckbox" type="radio" name="radio">
                                            <span class="radiocheckbox-replace"></span>
                                            <p>选项二</p>
                                        </label>
                                    </div>
                                </fieldset>
                                <fieldset class="form-group">
                                    <legend class="label">多选框<span class="red">*</span></legend>
                                    <div class="radiocheckbox-group-horizontal">
                                        <label class="radiocheckbox-item">
                                            <input class="radiocheckbox" type="checkbox" name="checkbox" required>
                                            <span class="radiocheckbox-replace"></span>
                                            <p>选项</p>
                                        </label>
                                        <label for="checkbox" class="error"></label>
                                    </div>
                                </fieldset>
                                <div class="form-footer">
                                    <button class="button" type="submit">提交</button>
                                </div>
                            </form>
                            <!-- form over -->
                        </div>
                    </section>
                </div>
                <!-- column over -->
                <!-- column-code start -->
                <div class="col-lg-12">
                    <section class="code-group">
                        <h6 class="code-title">HTML验证方式</h6>
                        <pre>
                            <code class="language-html">
                                <script type="text/plain">
                                <!-- form start -->
                                <form class="form" id="demo">
                                    <fieldset class="form-group">
                                        <legend class="label">用户名<span class="red">*</span></legend>
                                        <input class="input validate-feedback" type="text" name="username" placeholder="请输入2-16个字符" rangelength="2,16" required>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend class="label">密码<span class="red">*</span></legend>
                                        <input class="input" type="password" name="password" id="password" placeholder="请输入最少6个字符" minlength="6" required>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend class="label">重复密码<span class="red">*</span></legend>
                                        <input class="input" type="password" name="repeat-password" placeholder="请再次输入密码" minlength="6" equalTo="#password" required>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend class="label">电子邮箱</legend>
                                        <input class="input" type="email" name="email" placeholder="请输入电子邮箱地址">
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend class="label">下拉列表<span class="red">*</span></legend>
                                        <select class="select" required>
                                            <option value="">请选择</option>
                                            <option value="1">选项一</option>
                                            <option value="2">选项二</option>
                                        </select>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend class="label">单选框<span class="red">*</span></legend>
                                        <div class="radiocheckbox-group-horizontal">
                                            <label class="radiocheckbox-item">
                                                <input class="radiocheckbox" type="radio" name="radio" required>
                                                <span class="radiocheckbox-replace"></span>
                                                <p>选项一</p>
                                            </label>
                                            <label class="radiocheckbox-item">
                                                <input class="radiocheckbox" type="radio" name="radio">
                                                <span class="radiocheckbox-replace"></span>
                                                <p>选项二</p>
                                            </label>
                                        </div>
                                    </fieldset>
                                    <fieldset class="form-group">
                                        <legend class="label">多选框<span class="red">*</span></legend>
                                        <div class="radiocheckbox-group-horizontal">
                                            <label class="radiocheckbox-item">
                                                <input class="radiocheckbox" type="checkbox" name="checkbox" required>
                                                <span class="radiocheckbox-replace"></span>
                                                <p>选项</p>
                                            </label>
                                            <label for="checkbox" class="error"></label>
                                        </div>
                                    </fieldset>
                                    <div class="form-footer">
                                        <button class="button" type="submit">提交</button>
                                    </div>
                                </form>
                                <!-- form over -->
                                </script>
                            </code>
                        </pre>
                        <pre>
                            <code class="language-js">
                                <script type="text/plain">
                                // 表单验证Demo
                                $("#demo").validate({
                                    messages: {
                                        checkbox: "自定义信息"
                                    }
                                });
                                </script>
                            </code>
                        </pre>
                    </section>
                    <ul class="explain">
                        <li>给<code>input.input</code>追加类名<code>.validate-feedback</code>可启用验证通过的样式, 如demo里的"用户名"部分</li>
                        <li>错误信息默认显示在<code>legend.label</code>里, 手动添加<code>label.error</code>并且<code>for="指定name"</code>可以改变信息的显示位置, 如demo里的"多选框"部分</li>
                    </ul>
                </div>
                <!-- column-code over -->
            </div>
            <!-- row over -->
        </div>
        <!-- container over -->
        <!-- page script start -->
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                // 表单验证Demo
                $("#demo").validate({
                    messages: {
                        checkbox: "自定义信息"
                    }
                });
                // 代码块
                $.when(
                    $.getScript('js/clipboard/clipboard.min.js'),
                    $.getScript('js/prism/prism.js'),
                    $.getScript('js/prism/prism-copy.js')
                ).then(function() {
                    Prism.highlightAll();
                });
            });
        </script>
        <!-- page script over -->